<template>
  <div class="map-view">
    <!-- 地图容器 -->
    <div 
      class="map-container"
      :style="{ opacity: mapOpacity, transform: `scale(${mapScale})` }"
    >
      <div v-if="loading" class="loading">
        <div class="loading-character">🗺️</div>
        <div class="loading-text">正在探索附近...</div>
        <div class="loading-dots">
          <span></span><span></span><span></span>
        </div>
      </div>
      <div v-else id="map" class="map-element"></div>
    </div>
  </div>
</template>

<script>
import { Users, Zap, Package } from 'lucide-vue-next'
import L from 'leaflet'

// 修复 Leaflet 默认图标问题
delete L.Icon.Default.prototype._getIconUrl
L.Icon.Default.mergeOptions({
  iconRetinaUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon-2x.png',
  iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon.png',
  shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png',
})

export default {
  name: 'MapView',
  components: {
    Users,
    Zap,
    Package
  },
  data() {
    return {
      userLocation: [39.9042, 116.4074], // 默认北京坐标
      nearbyUsers: [],
      loading: true,
      map: null,
      userLevel: 5,
      mapOpacity: 0,
      mapScale: 0.9
    }
  },
  mounted() {
    this.initializeAnimations()
    this.loadMockData()
    this.getUserLocation()
  },
  methods: {
    initializeAnimations() {
      // 模拟动画效果
      setTimeout(() => {
        this.mapOpacity = 1
        this.mapScale = 1
      }, 400)
    },
    
    loadMockData() {
      const mockUsers = [
        {
          id: 1,
          name: '小明',
          level: 5,
          position: [39.9052, 116.4084],
          skills: ['烹饪', '编程', '摄影'],
          devices: ['相机', '烤箱', '吉他'],
          avatar: '👨‍💻',
          distance: '0.2km'
        },
        {
          id: 2,
          name: '小红',
          level: 3,
          position: [39.9032, 116.4064],
          skills: ['绘画', '瑜伽', '烘焙'],
          devices: ['画板', '瑜伽垫', '烘焙工具'],
          avatar: '👩‍🎨',
          distance: '0.3km'
        },
        {
          id: 3,
          name: '老王',
          level: 8,
          position: [39.9062, 116.4094],
          skills: ['修理', '园艺', '木工'],
          devices: ['工具箱', '电钻', '锯子'],
          avatar: '👨‍🔧',
          distance: '0.5km'
        },
        {
          id: 4,
          name: '小李',
          level: 4,
          position: [39.9022, 116.4054],
          skills: ['音乐', '教学', '翻译'],
          devices: ['钢琴', '投影仪', '书籍'],
          avatar: '👨‍🏫',
          distance: '0.4km'
        }
      ]
      
      setTimeout(() => {
        this.nearbyUsers = mockUsers
        this.loading = false
        this.initializeMap()
      }, 1000)
    },
    
    getUserLocation() {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
          (position) => {
            this.userLocation = [position.coords.latitude, position.coords.longitude]
            if (this.map) {
              this.map.setView(this.userLocation, 15)
            }
          },
          (error) => {
            console.log('获取位置失败:', error)
          }
        )
      }
    },
    
    initializeMap() {
      this.$nextTick(() => {
        this.map = L.map('map').setView(this.userLocation, 15)
        
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
          attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(this.map)
        
        // 添加用户自己的位置
        L.marker(this.userLocation)
          .addTo(this.map)
          .bindPopup(`
            <div class="popup-content">
              <h3>📍 你的位置</h3>
              <p>这里是你当前的位置</p>
            </div>
          `)
        
        // 添加附近用户标记
        this.nearbyUsers.forEach(user => {
          const customIcon = this.createCustomIcon(user)
          L.marker(user.position, { icon: customIcon })
            .addTo(this.map)
            .bindPopup(this.createUserPopup(user))
        })
      })
    },
    
    createCustomIcon(user) {
      return L.divIcon({
        html: `
          <div class="custom-marker">
            <div class="marker-avatar">${user.avatar}</div>
            <div class="marker-level">${user.level}</div>
          </div>
        `,
        className: 'custom-marker-container',
        iconSize: [50, 50],
        iconAnchor: [25, 50]
      })
    },
    
    createUserPopup(user) {
      return `
        <div class="user-popup">
          <div class="popup-header">
            <span class="user-avatar">${user.avatar}</span>
            <div>
              <h3>${user.name}</h3>
              <div class="level-badge">Lv.${user.level}</div>
            </div>
            <span class="distance">${user.distance}</span>
          </div>
          
          <div class="popup-section">
            <h4>🎯 技能</h4>
            <div class="tags">
              ${user.skills.map(skill => `<span class="skill-tag">${skill}</span>`).join('')}
            </div>
          </div>
          
          <div class="popup-section">
            <h4>📦 设备</h4>
            <div class="tags">
              ${user.devices.map(device => `<span class="device-tag">${device}</span>`).join('')}
            </div>
          </div>
          
          <button class="game-button contact-btn">
            联系 ${user.name}
          </button>
        </div>
      `
    }
  }
}
</script>

<style scoped>
.map-view {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overflow: hidden;
  padding: 0;
  margin: 0;
  z-index: 5;
}

@media (max-width: 480px) {
  .map-view {
    bottom: 0;
  }
}



/* 地图容器 */
.map-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.map-element {
  width: 100%;
  height: 100%;
}



/* 加载状态 */
.loading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  background: transparent;
  padding: 40px;
}

.loading-character {
  font-size: 48px;
  margin-bottom: 16px;
  animation: bounce 2s infinite;
}

.loading-text {
  font-size: 18px;
  font-weight: 600;
  color: #4a5568;
  margin-bottom: 16px;
}

.loading-dots {
  display: flex;
  gap: 8px;
}

.loading-dots span {
  width: 8px;
  height: 8px;
  background: #667eea;
  border-radius: 50%;
  animation: pulse 1.5s infinite;
}

.loading-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.loading-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}



/* 响应式设计 */
@media (max-width: 768px) {
  .top-bar {
    margin: 0 12px 12px 12px;
    padding: 12px 16px;
  }
  
  .location-title {
    font-size: 14px;
  }
  
  .location-subtitle {
    font-size: 12px;
  }
  
  .map-container {
    margin: 0;
  }
  
  .floating-cards {
    left: 16px;
    right: 16px;
    top: 80px;
  }
  
  .stats-card {
    padding: 16px;
    max-width: none;
  }
  
  .quick-actions {
    left: 16px;
    right: 16px;
    bottom: 16px;
  }
  
  .action-button {
    padding: 12px;
    font-size: 14px;
  }
  
  .action-icon {
    font-size: 16px;
  }
  
  .action-text {
    font-size: 12px;
  }
}
</style>

<style>
/* 全局样式用于地图标记 */
.custom-marker-container {
  background: none !important;
  border: none !important;
}

.custom-marker {
  position: relative;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.marker-avatar {
  font-size: 24px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  border: 3px solid #fff;
}

.marker-level {
  position: absolute;
  top: -5px;
  right: -5px;
  background: linear-gradient(45deg, #ffd700, #ffb347);
  color: #333;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: bold;
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4);
  border: 2px solid #fff;
}

/* 弹窗样式 */
.user-popup {
  min-width: 250px;
  font-family: Arial, sans-serif;
}

.popup-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid #eee;
}

.popup-header .user-avatar {
  font-size: 32px;
}

.popup-header h3 {
  margin: 0;
  color: #333;
  font-size: 18px;
}

.popup-header .level-badge {
  background: linear-gradient(45deg, #ffd700, #ffb347);
  color: #333;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
}

.distance {
  margin-left: auto;
  background: #e3f2fd;
  color: #1976d2;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
}

.popup-section {
  margin-bottom: 15px;
}

.popup-section h4 {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 8px 0;
  color: #555;
  font-size: 14px;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.skill-tag {
  background: linear-gradient(45deg, #4ecdc4, #44a08d);
  border-radius: 20px;
  padding: 6px 12px;
  margin: 4px;
  display: inline-block;
  font-size: 12px;
  font-weight: bold;
  box-shadow: 0 2px 8px rgba(68, 160, 141, 0.3);
  color: white;
}

.device-tag {
  background: linear-gradient(45deg, #f093fb, #f5576c);
  border-radius: 20px;
  padding: 6px 12px;
  margin: 4px;
  display: inline-block;
  font-size: 12px;
  font-weight: bold;
  box-shadow: 0 2px 8px rgba(245, 87, 108, 0.3);
  color: white;
}

.popup-content {
  text-align: center;
}

.popup-content h3 {
  margin: 0 0 10px 0;
  color: #333;
}

.contact-btn {
  width: 100%;
  margin-top: 10px;
  font-size: 14px;
  background: linear-gradient(45deg, #ff6b6b, #ee5a24);
  border: none;
  border-radius: 25px;
  padding: 12px 24px;
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(238, 90, 36, 0.4);
}

.contact-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(238, 90, 36, 0.6);
}
</style>